<template>
	<div class="tool-bar-ri">
		<div class="header-icon">
			<!-- <LockScreen /> -->
			<FullScreen style="margin-left: 10px;" />
			<!-- <Language id="language" /> -->
			<SearchMenu id="searchMenu" style="margin-left: 10px;" />
			<ColorPicker />
			<ThemeSetting id="themeSetting" />
		</div>
		<span class="username">{{info.userInfo.username}}</span>
		<Avatar :img="info.userInfo.img"/>
	</div>
</template>

<script setup>
import {ref} from "vue";
// import { GlobalStore } from "@/stores";
import SearchMenu from "./components/SearchMenu.vue";
// import Language from "./components/Language.vue";
import ThemeSetting from "./components/ThemeSetting.vue";
import LockScreen from "./components/LockScreen.vue";
import FullScreen from "./components/FullScreen.vue";
import Avatar from "./components/Avatar.vue";
const info = ref(JSON.parse(localStorage.getItem('GlobalState')));
// console.log(info.value)
</script>

<style scoped lang="scss">
.tool-bar-ri {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 30px;
	.header-icon {
		display: flex;
		align-items: center;
		justify-content:space-evenly;
		width: 180px;
		margin: 22px;
	}
	.username {
		margin: 0 20px 0 0;
		font-size: 15px;
	}
}
</style>
